<template>
  <view>
    <view class="content" v-if="shopInfo.progress==1">
      <view class="status">
        <view class="status-icon"></view>
        <view class="status-title">恭喜您，账号已注册成功</view>
      </view>
      <view class="shop">
        <view class="shop-title">添加您的专属健康顾问</view>
        <view class="user">
          <view class="user-img">
            <image :src="shopInfo.staffAvatarUrl"></image>
          </view>
          <view class="user-info">
            <view class="username">{{ shopInfo.staffName }}</view>
            <view class="user-desc">我承诺，我将竭诚为您服务</view>
          </view>
        </view>
        <view class="qcode">
          <image :show-menu-by-longpress="true" :src="shopInfo.staffQrCodeUrl"></image>
        </view>
        <view class="qcode-message">长按二维码，添加健康顾问</view>
      </view>
    </view>
    <view v-if="shopInfo.progress==2">
      <view class="status-box">
        <view class="status-box-icon"></view>
        <!--        <view class="status-box-title" v-if="config.rewardType==1">恭喜您，已添加健康顾问 <br/>-->
        <!--          <text>{{ config.rewardAmount }}</text>-->
        <!--          奖励已发放至您的微信钱包,请查收-->
        <!--        </view>-->
        <!--        <view class="status-box-title" v-if="config.rewardType==2">恭喜您，已添加健康顾问 <br/>-->
        <!--          <text>{{ config.rewardAmount }}</text>-->
        <!--          奖励已发放至您的人康账户，请查收-->
        <!--        </view>-->
        <view class="message">欢迎加入人康大家庭</view>
        <view class="button" @click="to_sindex()">去看看</view>
      </view>

    </view>

  </view>
</template>

<script>
export default {
  data() {
    return {
      unionid: "",
      shopInfo: {},
      config: {}
    }
  },
  onLoad(e) {
    this.unionid = e.unionid
  },
  onShow() {
    this.getQcode()
  },
  methods: {
    async getQcode() {
      var form_data = {
        unionid: this.unionid
      }
      const {data} = await this.$NoteApi.doRequest("get", 'introducedCustomer/registerCompletePage', form_data, 'json', true)
      this.shopInfo = data.data
      // if (this.shopInfo.progress == 2) {
      //   this.getConfig()
      // }
    },
    //获取加好友成功奖励 --- 废弃
    async getConfig() {
      uni.setNavigationBarTitle({title: "欢迎加入"})
      var form_data = {
        unionid: this.unionid
      }
      const {data} = await this.$NoteApi.doRequest("get", 'invitee/addFriendCompletePage', form_data, 'json', true)
      this.config = data.data
    },
    to_sindex() {
      uni.switchTab({
        url: "/pages/sindex/index"
      })
    }
  }
}
</script>

<style>
.content {
  width: 100%;
  height: 100vh;
  background-color: #5CAE77;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.status {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 80upx;
}

.status-icon {
  width: 180upx;
  height: 122upx;
  background-image: url(https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/newMember/icon_succeed@2x.png);
  background-size: 100% 100%;
  margin-bottom: 28upx;
}

.status-title {
  font-size: 40upx;
  color: #fff;
  font-weight: 600;
}

.shop {
  width: 690upx;
  height: 826upx;
  background-color: #DEEEE3;
  margin-top: 126upx;
  border-radius: 18px;
  border: 4upx solid #fff;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.shop-title {
  width: 550upx;
  height: 106upx;
  position: absolute;
  top: -53upx;
  left: 50%;
  transform: translate(-50%, 0);
  background-color: #00832B;
  font-size: 48upx;
  font-weight: 600;
  text-align: center;
  line-height: 106upx;
  border: 4upx solid #fff;
  border-radius: 53upx;
  color: #fff;
  box-sizing: border-box;
}

.user {
  width: 100%;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 24upx;
}

.user-img {
  width: 140upx;
  height: 140upx;
  border-radius: 50%;
  border: 2upx solid #fff;
  margin-right: 12upx;
}

.user-img image {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.user-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 140upx;
}

.username {
  font-size: 44upx;
  font-weight: 600;
  color: #333333;
  margin-bottom: 12upx;
}

.user-desc {
  font-size: 35upx;
  color: #555;
}

.qcode {
  width: 410upx;
  height: 410upx;
  background-color: #fff;
  margin-top: 37upx;
  margin-bottom: 27upx;
}

.qcode image {
  width: 100%;
  height: 100%;
}

.qcode-message {
  font-size: 42upx;
  color: #333;
  font-weight: 600;
}

.status-box {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding-top: 40upx;
  align-items: center;
}

.status-box-icon {
  width: 302upx;
  height: 190upx;
  background-image: url(https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/newMember/icon_zhifuchenggong@2x.png);
  background-size: 100% 100%;
  margin-bottom: 28upx;
}

.status-box-title {
  font-size: 40upx;
  color: #5CAE77;
  font-weight: 600;
  width: 660upx;
  text-align: center;
}

.status-box-title text {
  color: #FFB144;
}

.button {
  width: 500upx;
  height: 98upx;
  border-radius: 49upx;
  text-align: center;
  line-height: 98upx;
  color: #fff;
  background-color: #5CAE77;
  font-size: 44upx;
  font-weight: 500;
  margin-top: 128upx;
}

.message {
  font-size: 40upx;
  color: #666666;
  margin-top: 40upx;
}
</style>
